import React, { Component } from 'react'
import { Table, Tag, Space, Button, Modal,Input } from 'antd';
import { Form } from 'antd';
import { Select } from 'antd';
import { bindActionCreators } from "redux"
import Addeditmodel from '../components/addeditmodel';
import { connect } from "react-redux"
import Styles from "../style/tset.module.css" // .css 文件的后缀名不能省略
import * as action from "../action/tableIndex"
import Pagination from '../components/pagination';
import Dirlog from '../components/dirlog'; // 引入封装的弹唱组件
import {debounce} from "lodash" // debounce就是防抖 ,避免过多无效请求，合理利用网络资源
const renderdata = { // 定义后不需要修改的变量可以定义在整个类外面
     "shi":"是",
     "fou":"否"
}
const Styles1 = {
  "color":"red"
}
const { Option } = Select;
class Testpaperman extends Component {
  state = {
    inputVal:"",// 搜索输入框的值，
    selectVal:"", // select框的值
    index:1, // 分页默认展示第几页
    title: "新增",
    edititem:{},
    editindex:0,
    isModalVisible: false,
    sonshow: false, // 用于控制子弹窗组件的显示与隐藏
    delIndex: 0, // 用于控制删除第几条
    columns: [
      {
        title: 'Name',
        dataIndex: 'name1',
        key: 'name',
        render: text => <a>{text}</a>,
      },
      {
        title: 'Age',
        dataIndex: 'date',
        key: 'age',
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      },
      // {
      //   title: 'hesuan',
      //   dataIndex: 'state',
      //   key: 'state',
      //   render:(item)=>{
      //       console.log(item);
      //       return <b className={Styles[item]}>{data[item]}</b>
      //   }
      // },
      {
          title:"核酸",
          dataIndex:"state",
          key:"state",
          render:(text,record,index)=>{
              return <b className={Styles[text]}>{renderdata[text]}</b> //text  "shi" "fou"
          }
      },
      {
        title: 'Action',
        key: 'action',
        render: (text, record, index) => (
          <Space size="middle">
            <a onClick={this.editshow.bind(this, record, index,text)}>编辑</a>
            <a onClick={ debounce(this.delfn.bind(this, index,record),200) }>Delete</a>
          </Space>
        ),
      },
    ]
  }
  delfn(index,item) {  // 删除
    console.log(index,item)
    this.setState({
      sonshow: true,
      delIndex:item.id
    })
  }
  editshow(item, index,text) { // 编辑
    console.log(item,text)
    this.setState({
      isModalVisible: true,
      title: "编辑",
      edititem:item,
      editindex:index
    })
    // console.log(item, this.myref)
    // this.myref.setFieldsValue(item)

  }
  componentDidMount() {
    this.props.getList1()
  }
  showModeladd() { // 点击新增弹窗打开的方法
    this.setState({
      isModalVisible: true,
      title:"新增"
    })
    // setTimeout(()=>{
    //     this.myref.resetFields()
    // },100)
  }



  handleCancel() {
    this.setState({
      isModalVisible: false
    })
  }
  fasendsonfn = (data) => { // 父组件给子组件传递一个函数，用于子组件修改父组件的弹框显示的布尔值
    this.setState({
      sonshow: data
    })
  }
  fenye = (data)=>{
      this.setState({
        index:data
      })
  }
  handleChange(value) { // select框的value
    console.log(`selected ${value}`);
      this.setState({
        selectVal:value
      })
  }
  changeval(e){ // 受控组件改变的方法
      this.setState({
        inputVal:e.target.value
      })
  }
  submit(){ // 点击搜索的事件
    console.log(this.state.inputVal,this.state.selectVal);
    this.props.searchfn({name1:this.state.inputVal,state:this.state.selectVal})
  }
  reset() { // 点击重置时候的方法
    this.props.getList1()
    this.setState({
      inputVal:"",
    })
    this.handleChange("")
  }
  sonshow = (data)=> { // 该方法用接收子组件传给父组件得数据，来让弹窗显示隐藏
      this.setState({
        isModalVisible:data
      })
  }
  render() {
    return (
      <div className='tablewarp'>
        <div className='tablewarpson'>
            <Input placeholder="请输入姓名" width="100" value={this.state.inputVal} onChange={this.changeval.bind(this)}/>
            <Select value={this.state.selectVal} style={{ width: 120,marginLeft:"30px" }} onChange={this.handleChange.bind(this)}>
              <Option value="">请选择</Option>
              <Option value="fou">否</Option>
              <Option value="shi">是</Option>
             
            </Select>
            <Button style={{ marginLeft:"10px" }} onClick={this.submit.bind(this)}>搜索</Button>
             <Button style={{ marginLeft:"30px" }} onClick={this.reset.bind(this)}>重置</Button>
        </div>
       
        <Button type="primary" onClick={this.showModeladd.bind(this)}>新增</Button>
        <Table columns={this.state.columns} dataSource={this.props.arr.slice((this.state.index-1)*8,this.state.index * 8)} pagination={false}/>
        {/* 分页组件 */}
        <Pagination sendfn = {this.fenye}></Pagination>
  

        {/* 抽离出去的新增编辑弹框 */}
        <Addeditmodel title={this.state.title} isModalVisible={this.state.isModalVisible} sonshow={this.sonshow} editindex={this.state.editindex} edititem={this.state.edititem}></Addeditmodel>

        {/* 引入的弹框组件 */}
        <Dirlog ishow={this.state.sonshow} delIndex={this.state.delIndex} delfn={this.fasendsonfn}></Dirlog>


      </div>
    )
  }
}
let mapStateToprops = (state) => {
  return {
    ...state.tablereducer
  }
}
let mapDsipatchToProps = (dispatch) => bindActionCreators(action, dispatch)


export default connect(mapStateToprops, mapDsipatchToProps)(Testpaperman)